var newerGuiderMian = {
    init: function () {
        this.getStrategyData();
        this.getData();
        this.closeDiv();
        this.dialogEvent();
        this.getLevelSeal()
    },
    getData: function () {
        var url = "../mock/test.json"
        common.sendRequest(url, "GET", "", function (res) {
            var responseData = res;
        }, function (error) {
            var error_msg = error;
        })
    },
    closeDiv: function () {
        var $el = $(".strategy-content")
        $el.on("click", ".btn", function () {
            var isOpen = $(this).hasClass("open-btn");
            var parentEl = $(this).parent().parent();
            var $broEl = $(this).parent().parent().siblings(".active-content")
            var currentRt = $(this).parent()
            if (isOpen) {
                return;
            } else {
                $broEl.animate({width: "140px"});
                parentEl.animate({width: "430px"});
                parentEl.addClass("open");
                parentEl.removeClass("close");
                $broEl.removeClass("open").addClass("close")
                currentRt.fadeIn(1000)
            }
        })
    },
    dialogEvent: function () {
        var $mainEl = $(".level-container-content")
        $mainEl.on("click", "span", function () {
            $(".up, .down").show();
            $(".view").animate({height: "578px"}, 500, function () {
                    $(".close_btn").show();
                })
                .css("display", "block")
            $(".mask").css("display", "block")
        })
        $(".close_btn").on("click", function () {
            $(".close_btn").hide();
            $(".view").animate({height: "0"}, 500, function () {
                $(".up, .down").hide();
                $(".view").css("display", "none")
                $(".mask").css("display", "none")
            })
        })
    },
    getSubView: function (data) {
        var self = this,
            subView = '',
            mainView = '',
            lastView = '',
            item = data.length;
        if (item === 1) {
            subView =
                '   <p><img style="height: 280px" src="' + data[0].strategy_img + '" alt=""></p>' +
                '   <div class="strategy-title "><span class="u-fz-24"> &gt;&gt;</span><span class="u-fz-24">' + data[0].strategy_title + '</span>' +
                '       <p class="strategy-txt">' + data[0].strategy_text + '</p>' +
                '   </div>';
        } else if (item <= 3) {
            subView =
                '   <p><img src="' + data[0].strategy_img + '" alt=""></p>' +
                '   <div class="strategy-title "><span class="u-fz-24"> &gt;&gt;</span><span class="u-fz-24">' + data[0].strategy_title + '</span>' +
                '       <p class="strategy-txt">' + data[0].strategy_text + '</p>' +
                '   </div>';
            for (var i = 1; i < data.length; i++) {
                lastView += '<p class="strategy-title u-fz-24"><span> &gt;&gt;</span><span>' + data[i].strategy_title + '</span></p>'
            }
            subView = subView + lastView
        } else if (item <= 5) {
            subView =
                '   <p><img style="height: 260px" src="' + data[0].strategy_img + '" alt=""></p>' +
                '   <p class="strategy-title "><span class="u-fz-24"> &gt;&gt;</span><span class="u-fz-24">' + data[0].strategy_title + '</span></p>'
            for (var i = 1; i < data.length; i++) {
                lastView += '<p class="strategy-title u-fz-24"><span> &gt;&gt;</span><span>' + data[i].strategy_title + '</span></p>'
            }
            subView = subView + lastView
        } else {
            subView =
                '   <p class="strategy-title u-fz-24"><span> &gt;&gt;</span><span>' + data[0].strategy_title + '</span></p>' +
                '       <p class="strategy-txt">' + data[0].strategy_text + '</p>'
            for (var i = 1; i < data.length; i++) {
                lastView += '<p class="strategy-title u-fz-24"><span> &gt;&gt;</span><span>' + data[i].strategy_title + '</span></p>'
            }
            subView = subView + lastView
        }
        mainView = '<div class="active-content-rt fl">' + subView + '</div>'
        return mainView
    },
    getStrategyData: function () {
        var self = this;
        var url = "../mock/strategyData.json",
            htmlHeader = '<div class="fl strategy-left-btn clear-fix"><img src="../images/btn_left1.png" alt=""></div>',
            htmlFooter = '<div class="fl strategy-right-btn"><img src="../images/btn_right1.png" alt=""></div>';
        common.sendRequest(url, "GET", "", function (res) {
            var responseData = res,
                html = '',
                htmlContent = '';
            for (var i = 0; i < responseData.data.length; i++) {
                var isOpen = i === 0 ? "open" : "close";
                var subView = self.getSubView(responseData.data[i].strategy_info)
                htmlContent +=
                    '<div class="fl active-content ' + isOpen + ' clear-fix">' +
                    '   <div class="active-content-lf fl">' +
                    '       <p><img src="' + responseData.data[i].img + '" alt=""></p>' +
                    '       <p class="level-txt"><span class="vertical-mode level-txt-lf">' + responseData.data[i].level_rating + '</span><span class="middle-line"></span><span class="vertical-mode level-txt-rt"> ' + responseData.data[i].level_name + '</span></p>' +
                    '       <p class="open-btn btn"><img src="../images/btn_content.png" alt=""></p>' +
                    '       <p class="close-btn btn"><img src="../images/btn_content1.png" alt=""></p>' +
                    '   </div>'
                    + subView +
                    '</div>';
            }
            html = htmlHeader + htmlContent + htmlFooter
            $(".strategy-content").append(html);

        }, function (errMes) {

        })
    },
    getLevelSeal:function(){
        var url ="../mock/level_seal.json"
        common.sendRequest(url,"POST",{"name":"richard"},
            function(res){
                if(res.data.length > 0){
                    var htmlContent = ''
                    $.each(res.data,function(index,item){
                        htmlContent += '<span><img src="'+item.img +'" alt=""></span>'
                    })
                    $(".level-container-content").append(htmlContent);
                }
            },
            function(){

            })

    }
}
newerGuiderMian.init()